<template>
    <div>
        <div v-for="(item, index) in configs" class="config" :key="index">
            <span class="configtit">{{item.title}}</span>
            <ul>
                <li v-for="(config, conindex) in item.configs" @click="changeItem(config, index)" :class="config.isactive ? 'active' : ''" :key="conindex">{{config.name}}</li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'configs',
    props: {
        configs: Array
    },
    methods: {
        changeItem(item, index) {
            this.configs[index].configs.forEach(item => {
                item.isactive = false
            })
            item.isactive = true
            this.$emit('changeItem', item)    
        }
    }
}
</script>
<style lang="scss">
.config {
    display: flex;
    background: #E2EEFD;
    padding: 12px;
    .configtit{
        font-family:MicrosoftYaHei-Bold;
        font-weight:bold;
        color:rgba(51,51,51,1);
        margin-right: 30px;
        padding: 6px;
    }
    ul {
        display: flex;
        li {
            margin-right: 20px;
            border-radius:5px;
            padding: 6px;
        }
        .active {
            background: #1E7CF0;
            color: white;
            box-shadow:0px 0px 1px 0px rgba(189,189,190,0.5);
        }
        li:hover{
            cursor: pointer;
        }
    }
}  
</style>
